<template>
  <div id="app">
    <div class="row-wrap">
      <lm-date-picker v-model="now"></lm-date-picker>
      <lm-button @click="buttonClick" size="large">default</lm-button>
      <lm-button type="info">info</lm-button>
      <lm-button type="success">success</lm-button>
      <lm-button type="danger">danger</lm-button>
      <lm-button type="primary">primary</lm-button>
      <lm-button type="warning">warning</lm-button>
    </div>
    <div class="row-wrap">
      <lm-button plain>default</lm-button>
      <lm-button plain type="info">info</lm-button>
      <lm-button plain type="success">success</lm-button>
      <lm-button plain type="danger">danger</lm-button>
      <lm-button plain type="primary">primary</lm-button>
      <lm-button plain type="warning">warning</lm-button>
    </div>
    <div class="row-wrap">
      <lm-button plain round>default</lm-button>
      <lm-button plain round type="info">info</lm-button>
      <lm-button plain round type="success">success</lm-button>
      <lm-button plain round type="danger">danger</lm-button>
      <lm-button plain round type="primary">primary</lm-button>
      <lm-button plain round type="warning">warning</lm-button>
    </div>
    <div class="row-wrap">
      <lm-button plain circle icon="lm-icon-check">icon</lm-button>
      <lm-button plain circle icon="lm-icon-check" type="info">icon</lm-button>
      <lm-button plain circle icon="lm-icon-check" type="success">icon</lm-button>
      <lm-button plain circle icon="lm-icon-check" type="danger">icon</lm-button>
      <lm-button plain circle icon="lm-icon-check" type="primary">icon</lm-button>
      <lm-button plain circle icon="lm-icon-check" type="warning">icon</lm-button>
    </div>
    <div class="row-wrap">
      <lm-button plain circle icon="lm-icon-check"></lm-button>
      <lm-button plain circle icon="lm-icon-check" type="info"></lm-button>
      <lm-button plain circle icon="lm-icon-check" type="success"></lm-button>
      <lm-button plain circle icon="lm-icon-check" type="danger"></lm-button>
      <lm-button plain circle icon="lm-icon-check" type="primary"></lm-button>
      <lm-button plain circle icon="lm-icon-check" type="warning"></lm-button>
    </div>
    <div class="row-wrap">
      <lm-button @click="visible = true">展示dialog</lm-button>
      <lm-dialog title="提示" :visible.sync="visible">
        我是内容
        <!-- <template v-slot:footer>
          <lm-button>取消</lm-button>
          <lm-button type="primary">确定</lm-button>
        </template>-->
      </lm-dialog>
    </div>
    <div class="row-wrap">
      <lm-input v-model="username" placeholder="请输入用户名" @focus="focusFun" @blur="blurFun"></lm-input>
      <lm-input v-model="username" placeholder="请输入简介" :autosize="autosize" type="textarea"></lm-input>
      <lm-input v-model="username" placeholder="请输入简介2" type="textarea"></lm-input>
    </div>
    <div class="row-wrap">
      <lm-switch v-model="active"></lm-switch>
    </div>
    <div class="row-wrap">
      <lm-radio label="1" v-model="gender">男</lm-radio>
      <lm-radio label="0" v-model="gender">女</lm-radio>
    </div>
    <div class="row-wrap">
      <lm-radio-group v-model="gender">
        <lm-radio label="1">男</lm-radio>
        <lm-radio label="0">女</lm-radio>
      </lm-radio-group>
    </div>
    <div class="row-wrap">
      <lm-checkbox v-model="checked">是否选中</lm-checkbox>
    </div>
    <div class="row-wrap">
      <lm-checkbox-group v-model="hoby">
        <lm-checkbox label="香蕉"></lm-checkbox>
        <lm-checkbox label="苹果"></lm-checkbox>
        <lm-checkbox label="火龙果"></lm-checkbox>
      </lm-checkbox-group>
    </div>
    <div class="row-wrap">
      <lm-form :model="formdata" label-with="100px" :rules="rules">
        <lm-form-item label="用户名" prop="name">
          <lm-input
            placeholder="请输入用户名"
            name="username"
            @focus="focusFun"
            @blur="blurFun"
            v-model="formdata.name"
          ></lm-input>
        </lm-form-item>
      </lm-form>
    </div>
    <div class="row-wrap">
      <lm-button @click="showToast">展示Toast</lm-button>
      <lm-tree :allData="tree" v-model="checkedList" @change="change"></lm-tree>
    </div>
    <div class="row-wrap">
      <lm-input-number v-model="inputNum" :precision="2" :step="0.1"></lm-input-number>
      <lm-button @click="showMessage">点击展示message</lm-button>
      <lm-button @click="showMessageBox">点击展示messagebox</lm-button>
      <lm-button @click="showModal">点击展示modal</lm-button>
    </div>
    <div class="row-wrap">
      <lm-uploader></lm-uploader>
    </div>
    <div class="row-wrap">
      <div class="grow-one"></div>
      <div class="grow-two"></div>
      <div class="grow-three"></div>
    </div>
    <router-view />
  </div>
</template>

<script>
import modalTemp from "./common/modalTemp";
export default {
  name: "App",
  data() {
    return {
      visible: false, // 控制dialog的展示
      username: "", // 用户名
      active: true,
      gender: "0",
      checked: false,
      hoby: ["香蕉", "苹果", "火龙果"],
      formdata: {
        name: "",
        type: ["线下主题活动"],
        resource: "",
        desc: "",
        count: 1,
        pics: [],
      },
      rules: {
        name: [{ required: true, message: "请输入活动名称", trigger: "blur" }],
        desc: [{ required: true, message: "请填写活动形式", trigger: "blur" }],
        type: [
          {
            type: "array",
            required: true,
            message: "请至少选择一个活动性质",
            trigger: "change",
          },
        ],
        resource: [
          {
            required: true,
            message: "请至少选择一个活动资源",
            trigger: "change",
          },
        ],
        pics: [
          {
            type: "array",
            required: true,
            message: "请至少选择一张活动照片",
            trigger: "change",
          },
        ],
      },
      now: new Date(),
      tree: [
        {
          label: "一级 1",
          children: [
            {
              label: "二级 1-1",
              children: [
                {
                  label: "三级 1-1-1",
                },
              ],
            },
          ],
        },
        {
          label: "一级 2",
          children: [
            {
              label: "二级 2-1",
              children: [
                {
                  label: "三级 2-1-1",
                },
              ],
            },
            {
              label: "二级 2-2",
              children: [
                {
                  label: "三级 2-2-1",
                },
              ],
            },
          ],
        },
        {
          label: "一级 3",
          children: [
            {
              label: "二级 3-1",
              children: [
                {
                  label: "三级 3-1-1",
                },
              ],
            },
            {
              label: "二级 3-2",
              children: [
                {
                  label: "三级 3-2-1",
                },
              ],
            },
          ],
        },
      ],
      checkedList: [],
      plist: [], //此级以上所有父节点列表
      flatTree: [], //tree的平行数据
      node: "", //当前点击的node,
      autosize: [2, 6],
      inputNum: 10,
    };
  },
  mounted() {
    this.transformData(this.tree); //数据初始化:将tree树形数据转换为平行数据
  },
  methods: {
    showModal() {
      this.$modal({
        template: modalTemp,
        params: {
          name: "我是外部传过来的数据",
        },
        success: (data) => {
          console.log(data, "data");
          this.$toast({
            message: `${data.message}`,
          });
        },
        fail: (error) => {
          this.$toast({
            message: `${error.message}`,
          });
        },
      });
    },
    showMessageBox() {
      this.$confirm({
        title: "标题",
        content: "内容",
        onOk: () => {
          this.$message({
            message: "操作成功了",
          });
        },
        onCancel: () => {
          this.$message({
            message: "取消操作",
          });
        },
      });
    },
    showMessage() {
      this.$message({
        message: "我是message消息提示哈",
        duration: 3000,
        autoClose: false,
        position: "center",
      });
    },
    // 用户名，获取焦点
    focusFun() {
      console.log("获取焦点");
    },
    blurFun() {
      console.log("失去焦点");
    },
    buttonClick(e) {
      console.log("点击了按钮");
    },
    showToast() {
      this.$toast({
        message: "这是一个toast提示",
        autoClose: true,
        onClose: () => {
          this.$message({
            message: "关闭了喔",
          });
        },
      });
    },
    change(e) {
      console.log(e, "eeeeeeeeeeeeeee");
      this.tree = e;
    },
    //将tree树形数据转换为平行数据
    transformData(tree) {
      tree.forEach((item) => {
        this.flatTree.push(item);
        item.children && item.children.length > 0
          ? this.transformData(item.children)
          : "";
      });
    },
    //子组件传递过来的点击的node的值
    selectnode(node) {
      this.node = node;
      this.flatTree = [];
      this.transformData(this.tree);
      if (node.check == false) {
        //这个节点已经被选中，正在点击取消选中
        this.plist = []; //每次点击一个新的节点都将原来plist的内容清空
        this.getParentnode(this.flatTree, node.pid);
      } else {
        //正在选中
        this.childAllToParent(node, this.flatTree, 1);
      }
    },
    //子节点取消选中，拿到此子节点所有的父节点plist
    getParentnode(tree, pid) {
      //this.plist=[]
      if (pid !== null) {
        tree.forEach((item) => {
          if (item.id == pid) {
            this.plist.push(item);
            this.getParentnode(this.flatTree, item.pid);
          }
        });
      }
      if (!pid) {
        this.plist.forEach((item) => {
          this.updateParentCheck(this.tree, item);
        });
      }
    },
    //将原数据tree对应id的项的check值改为false
    updateParentCheck(tree, plistItem) {
      //console.log("方法updateParentCheck接收的plistItem参数:",plistItem)
      tree.forEach((item) => {
        if (item.id == plistItem.id) {
          item.check = false;
        }
        if (item.id !== plistItem.id && item.children) {
          this.updateParentCheck(item.children, plistItem);
        }
      });
    },
    //子节点全部选中后父节点选中
    childAllToParent(node, flatTree, j) {
      let fatherNode = "";
      let brotherNode = [];
      this.flatTree.forEach((item) => {
        if (node.pid && node.pid == item.id) {
          fatherNode = item; //找到了父节点--用于改变check的值
        }
      });
      //判断该结点所有的兄弟节点是否全部选中
      flatTree.forEach((item) => {
        if (item.pid && node.pid && item.pid == node.pid) {
          brotherNode.push(item); //找到所有的兄弟节点
        }
      });
      //i为被选中的兄弟节点的个数
      let i = 0;
      this.flatTree.forEach((item) => {
        if (node.pid == item.pid && item.check == true) {
          i = i + 1;
        }
      });
      //修改父节点的选中值
      if (i == brotherNode.length && fatherNode) {
        fatherNode.check = true;
      }
      // console.log(`第j次递归 j=${j}`)
      // console.log(`iii选中的bro=${i}，brother的个数：${brotherNode.length}`)
      // console.log("父节点：",fatherNode,"兄弟节点",brotherNode)
      if (fatherNode.pid !== undefined) {
        j = j + 1;
        this.childAllToParent(fatherNode, this.flatTree, j);
      }
    },
  },
};
</script>

<style lang="scss">
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.row-wrap {
  margin: 0 auto;
  margin-bottom: 30px;
  width: 40%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.grow-one {
  flex-grow: 1;
  height: 50px;
  background: #2c3e50;
}
.grow-two {
  flex-grow: 2;
  height: 50px;
  background: palegreen;
}
.grow-three {
  flex-grow: 3;
  height: 50px;
  background: palevioletred;
}
.lm-input {
  width: 180px !important;
}
</style>
